<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel='stylesheet' href='<c:url value="/css/common.css" />' type='text/css' media='all' />
<link rel='stylesheet' href='<c:url value="/css/admission.css" />' type='text/css' media='all' />
<link rel='stylesheet' href='<c:url value="/css/student.css" />' type='text/css' media='all' />
<link rel='stylesheet' href='<c:url value="/css/attendance.css" />' type='text/css' media='all' />
<link rel='stylesheet' href='<c:url value="/plugin/fancybox/source/jquery.fancybox.css" />' type='text/css' media='screen' />

  
  <script type="text/javascript" src="/epms/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="<c:url value="/plugin/fancybox/source/jquery.fancybox.pack.js" />"></script>
   
  <script>
  $(document).ready(function() {
      $('.fancybox').fancybox();
  });
  function closeFancyBox(){
	  $.fancybox.close();
  }
  function markAttendance(){
		$.post('http://localhost:8080/epms/saveAttendance.htm',$("#attendance").serialize(), function(data) {
		 if(data == 'Success'){
			 $.fancybox.close();
		 }
		});   
  }
  function displayfancyBox(studentId,sectionId,attendanceDate){
	  $.fancybox(document.getElementById("markAttendanceDiv"));
	  $("#studentId").val(studentId);
	  $("#sectionId").val(sectionId);
	  $("#attendanceDate").val(new Date());
  }
  </script>
  
<script type="text/javascript">
	function getStudentJson(sel){
		var studentData ='';
		var monthDays = daysInMonth();
		var today = new Date();
		var month = today.getMonth();
		var year = today.getFullYear();

		$.getJSON('http://localhost:8080/epms/getStudents/'+sel.value+'.htm', function(data) {
			for (i in data)
			{    				
				var studentData ='';
				studentData = "<tr class='tr-odd td-odd' id='"+data[i].id+"'><td class='td-name'>"+data[i].userDetails.userDisplayNameFirst +" "+data[i].userDetails.userDisplayNameLast+"</td>";
				for(var j = 0;j<monthDays;j++){
					var dt = j+"-"+month+"-"+year;
					studentData = studentData + "<td id='student-"+data[i].id+"-date-"+dt+"' class='td-mark'><a id='"+data[i].id+"|"+dt+"' onclick='displayfancyBox("+data[i].id+","+sel.value+","+dt+");'>P</a></td>";					
				}
				studentData = studentData + "</tr>" ;
				$('#register-table > tbody:last').append(studentData);
			}			
		}); 

		var nextMonth = 0;
		var prevMonth = 0;
		
		if(month >= 0 && month <= 11){
			nextMonth = month +1;			
			if(month == 0){
				prevMonth = 11;
			}else{
				prevMonth = month -1;
			}
		}else{
			nextMonth = 1;
			prevMonth = 11;
		}

		var nextMonthStr = "<a class='goto' onclick='changeMonth("+nextMonth+","+year+","+sel.value+");'>></a>" ;
		var prevMonthStr = "<a class='goto' onclick='changeMonth("+prevMonth+","+year+","+sel.value+");'>></a>" ;
		
		$("#nextM").html("");			
		$("#nextM").html(nextMonthStr);
		$("#prevM").html("");			
		$("#prevM").html(prevMonthStr);

	}
	
	function daysInMonth() {
		var today = new Date();
		var mm = today.getMonth()+1;
		var yy = today.getYear();
		
	    return new Date(yy, mm, 0).getDate();
	}

	function getMonthFullName(month){
		if(month == 0){
			return  'January ';
		}else if(month == 1){
			return  'Febuary ';
		}else if(month == 2){
			return  'March ';
		}else if(month == 3){
			return  'April ';
		}else if(month == 4){
			return  'May ';
		}else if(month == 5){
			return  'June ';
		}else if(month == 6){
			return  'July ';
		}else if(month == 7){
			return  'August ';
		}else if(month == 8){
			return  'September ';
		}else if(month == 9){
			return  'October ';
		}else if(month == 10){
			return  'November ';
		}else if(month == 11){
			return  'December ';
		}else if(month == 12){
			return  'January ';
		}	
	}
	
	function changeMonth(month , year , sectionId){
		var nextMonth = 0;
		var prevMonth = 0;
		
		if(month >= 0 && month <= 11){
			nextMonth = month +1;			
			if(month == 0){
				prevMonth = 11;
			}else{
				prevMonth = month -1;
			}
		}else{
			nextMonth = 1;
			prevMonth = 11;
		}
		
		$.get('http://localhost:8080/epms/ajax/getMonthCalendar.htm?month='+month+'&year='+year+"&sectionId="+sectionId, function(data) {
			
			var nextMonthStr = "<a class='goto' onclick='changeMonth("+nextMonth+","+year+","+sectionId+");'>></a>" ;
			var prevMonthStr = "<a class='goto' onclick='changeMonth("+prevMonth+","+year+","+sectionId+");'>></a>" ;
			
			$("#nextM").html("");			
			$("#nextM").html(nextMonthStr);
			$("#month").html("");			
			$("#month").html(getMonthFullName(month)+" "+year);
			$("#prevM").html("");			
			$("#prevM").html(prevMonthStr);
			
			$("#calendarDiv").html("");
			$("#calendarDiv").html(data);
		}); 
	}
	
</script>

</head>
<body>
<jsp:include page="../common/header.jsp" />
<!-- <a href="#markAttendanceDiv" class="fancybox">Example</a> -->
    <div class="content-outer" >
     <div class="content">     
		<div id="content-header"> 
		  <img src="<c:url value="/images/student_details_logo.jpg" />" alt="Student_details_logo">
		  <h1>Student Details</h1>
		  <h3>View Details</h3>
		  <div id="app-back-button">							
		    <a onclick="history.back(); return false;" href="#"><img border="0" src="<c:url value="/images/buttons/back.png"/>" alt="Back"></a>
		  </div>
		</div>
		<div id="inner-tab-menu">
		  <ul>
		    <li><a href="/student/view_all">View all</a></li>
		    <li><a href="/student/advanced_search">Advanced</a></li>
		  </ul>
		</div>
		
		<!-- start content html--> 
		
		<div id="page-yield">
		  <div class="label-field-pair">
		    <label>Select a batch</label>
		    <div class="text-input-bg">  
		        <select onchange="getStudentJson(this);" name="batchId" id="batch_id">
		         <option value="">Select a Class</option>
		          <c:forEach var="section" items="${sections}">                
				   <option value="${section.sectionId}">${section.clas.name} - ${section.name}</option>  
		    	  </c:forEach>
			   </select>
		      
		    </div>
		    <img border="0"  style="display: none;" src="/images/loader.gif?1346784968" id="loader" alt="Loader">
		  </div>
		<input type="hidden" value="2014-01-13" name="time_zone_date" id="time_zone">
		
		
		  <div id="subjects"></div>
		  <div id="register"></div>
		  <div style="display:none;" id="modal-box"></div>
		</div>
			<%
			Calendar now = Calendar.getInstance();
			SimpleDateFormat formatter = new SimpleDateFormat("MMMM yyyy");
			String currentDate = formatter.format(now.getTime());
			int currentMonth = now.get(Calendar.MONTH);
			int currentYear = now.get(Calendar.YEAR);
			
			int nextMonth = 0;
			int prevMonth = 0;			
			if(currentMonth>=0 && currentMonth <= 11){
				nextMonth = currentMonth + 1 ;
				if(currentMonth == 0){
					prevMonth = 11;
				}else{
					prevMonth = currentMonth -1;
				}
			}else{
				nextMonth = 1 ;
				prevMonth = 11 ;
			}			
			%>

			<div id="register">
				<div class="header">
					<div id="prevM">
						<a class="goto" onclick="changeMonth(<%=prevMonth%>,<%=currentYear%>);"><</a>
					</div>
					<div id="month"><%=currentDate %></div>
					<div id="nextM">
						<a class="goto" onclick="changeMonth(<%=nextMonth%>,<%=currentYear%>);">></a>
					</div>
					<div class="extender"></div>
				</div>
				<div class="box-1">
					<div id="calendarDiv">
					<table id="register-table">
						<tbody>
							<tr class="tr-head" id="tr-month">
								<td class="head-td-name">Name</td>								
								<%
								int daysInMonth = now.getActualMaximum(Calendar.DAY_OF_MONTH); // 28
								String weekDay = null;
								for(int weekDayCount = 1;weekDayCount<=daysInMonth;weekDayCount++){
									now.set(Calendar.DAY_OF_MONTH, weekDayCount);
									SimpleDateFormat formatter1 = new SimpleDateFormat("E");
									weekDay = formatter1.format(now.getTime());
									%>
									<td class="head-td-date"><div class="day"><%=weekDay%></div>
									<div class="date"><%=weekDayCount%></div></td>									
									<%
								}

								%>

							 </tr>		
						</tbody>
					</table>
					</div>
				</div>
				
			</div>

      </div>
      </div>
<jsp:include page="../common/footer.jsp" /> 
</body>



<div id="markAttendanceDiv" style="width:300px;height:225px;display: none;">
<form name="attendance" id="attendance" method="post" action="#" >

<input type="hidden" id="sectionId" name="sectionId" value="" />
<input type="hidden" id="studentId" name="studentId" value="" />
<input type="hidden" id="attendanceDate" name="date" value="" />

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td colspan="2" height="8px"></td>
</tr>

<tr>
<td colspan="2" class="feedbacktext_site" style="background:#fcecb9; height:15px; color:#000;">Please Mark the attendace by selecting option</td>
</tr>
<tr>
<td colspan="2" height="15px"></td>
</tr>

<tr>

<td colspan="2" class="feedbacktext_site"><table width="100%" style=" height:25px;" cellpadding="3" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="top" width="79"><span style="font-size:11px;color:#4d4d4d;font-weight:bold;">Mark Attendance</span> </td>
<td align="center" valign="top" width="41"><input type="radio" value="1" name="status" > <span style="font-size:13px;color:#444">Present</span>        </td>
<td align="center" valign="top" width="39"><input type="radio" value="0" name="status" >  <span style="font-size:13px;color:#444">Absenr</span>    </td>
</tr>


</tbody>
</table></td>
</tr>
<tr>
<td colspan="2" class="feedbacktext_site">
<textarea style="height:80px;width:285px; font-size:11px;" class="emailfeedback" name="reason" id="comments1" rows="15" cols="10" title="Enter your comments" onfocus="if(this.value=='Type your comments here...') this.value='';" onblur="if(this.value=='') {this.value='Type Absent Reason here...';}">Type Absent Reason here...</textarea></td>
</tr>
<tr>
<td colspan="2" height="8px"></td>
</tr>
<tr>
<td colspan="2" class="feedbacktext_site" align="center">
<input type="button" onclick="markAttendance()" class="feedbackBtn" style="cursor:pointer;" value="Submit" id="" tabindex="11" /> &nbsp; <input type="button" onclick="closeFancyBox();" class="feedbackBtn" style="cursor:pointer;" value="Cancel" id="" tabindex="12"></td>

</tr>
</tbody></table><div id="msgDiv" style="color: red"></div>
</form>
</div>





</html>